@import "./variables.less";
@import "./function";
.multipleCol(@colNum: 4, @spacing: @lg-spacing) {
  &__wrap {
    display: flex;
    flex-flow: wrap;
    padding: 0 @lg-spacing @lg-spacing;
    margin: 0 -@spacing -@spacing 0;
  }
  &__item {
    width: calc((100vw - (@colNum + 1) * @lg-spacing) / @colNum);
    margin: 0 @spacing @spacing 0;
  }
}
.m-thumbnail(@colNum: 4, @spacing: @lg-spacing){
  &__wrap{
    padding:0 @lg-spacing @lg-spacing;
    margin:0 -@lg-spacing -@lg-spacing 0;
    display:flex;
    flex-flow: wrap;
  }
  &__item, &__img{
    width: calc((100vw - (@colNum + 1) * @lg-spacing) / @colNum);
    height: calc((100vw - (@colNum + 1) * @lg-spacing) / @colNum);
  }
  &__item{
    margin: 0 @spacing @spacing 0;
  }
}
.m-gray-panel() {
  &__hd {
    color: @text-secondary;
    line-height: 4 * @md-spacing;
    padding: 0 @lg-spacing;
  }
  &__bd {
    background: #fff;
  }
}

.m-order() {
  &__wrap {
    padding-bottom: @md-spacing;
    background: #fff;
  }
  &__meta {
    padding: @sm-spacing @lg-spacing 0!important;
  }
  &__num {
    color: @text-secondary!important;
    transform: translateX(-20px);
  }
  &__status {
    color: @warning;
  }
  &__status-icon {
    right: -@md-spacing;
    top: -@md-spacing * 3;
    .u-seal();
  }
}
.m-form-cell() {
  &__title {
    &--required:before {
      content: '*';
      position: absolute;
      left: 7px;
      font-size: 14px;
      color: #f44;
    }
  }
  &__justify {
    margin: 0 -@lg-spacing -@md-spacing;
  }
}
.m-bot-btn {
  &__wrap {
    padding: 0 @md-spacing @md-spacing;
  }
}
.m-add() {
  &__wrap {
    box-shadow: 0 0 @lg-spacing fade(@primary,50%);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: @primary;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    color: #fff;
  }
  &__text {
    font-size: 10px;
    padding-bottom: @sm-spacing;
  }
}
